<template>
    <div class="content">
        <el-dropdown trigger="click" @command="halderCommand">
            <span class="el-dropdown-link">
                <el-avatar :src="user.avatarUrl" :size="30"></el-avatar>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="UserFilled" :command="1">{{ $t('headportrait.personalinfor')
                    }}</el-dropdown-item>
                    <el-dropdown-item :icon="Unlock" :command="2" divided>{{ $t('headportrait.changepassword')
                    }}</el-dropdown-item>
                    <el-dropdown-item :icon="Right" :command="3" divided>{{ $t('headportrait.logout')
                    }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
import { UserFilled, Unlock, Right } from '@element-plus/icons-vue'//引入图标
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/admin/Index";

const store = useUserStore()//实例化仓库，获取用户头像
const user = store.user

const router = useRouter()

const halderCommand = (code: number) => {
    switch (code) {
        case 1://个人信息
            router.push('/index/userinfo')
            break;
        case 2://修改密码
            router.push('/index/modifypassword')
            break;
        case 3://退出登录
            store.logout()
            break;
        default:
            break;
    }
}
</script>

<style lang="less" scoped>

</style>